import classNames from 'classnames';
import { useState } from 'react';
import { ColorModeItem } from '@/app/[locale]/navbar';

export default function ColorUserIdH5Page() {
  const [colorMode, setColorMode] = useState('auto');

  return (
    <div
      className={classNames(
        'd-flex align-items-center gap-4 justify-content-between p-2 btn',
      )}
    >
      <div className="hstack gap-3 align-items-center">
        <div>
          {colorMode === 'light' && (
            <i className="bi bi-brightness-high-fill"></i>
          )}
          {colorMode === 'dark' && <i className="bi bi-moon-stars-fill"></i>}
          {colorMode === 'auto' && <i className="bi bi-circle-half"></i>}
        </div>
        <ColorModeItem
          callback={(theme) => setColorMode(theme)}
          name="自动模式"
          aPy0={true}
          isShowDropdownToggle={false}
        />
      </div>
      <div>
        <i className="bi bi-chevron-right"></i>
      </div>
    </div>
  );
}
